<template>
  <div>
    <Card
      :title="copyFormData.pageTitle"
      :bordered="false"
      dis-hover
      class="ivu-mt"
    >
      <Form
        ref="formData"
        :model="formData"
        :rules="copyFormDataRules"
        :label-width="140"
      >
        <Row>
          <Col
            span="18"
            offset="3"
            v-for="(item, index) in copyFormData"
            :key="index"
          >
            <component
              :itemData="item.data"
              :formData.sync="formData"
              v-bind:is="item.fileName"
              @handleChangeFormData="handleChangeFormData"
            ></component>
          </Col>
          <Col span="18" offset="3">
            <FormItem>
              <Button
                type="primary"
                :loading="sLoading"
                @click="handleSubmit('formData')"
                >提交</Button
              >
              <Button @click="handleReset('formData')" class="ivu-ml-8"
                >取消</Button
              >
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Card>
  </div>
</template>
<script>
import { ApiRequest } from '@api/basePage';
import forms from '@/mixins/dynamicFormAdd'; // 混入通用代码
import qwSelectTree from '@/components/common/formItem/qwSelectTree'; // selectTree组件
import qwInput from './comps/qwInput'; // input组件
import qwSelect from '@/components/common/formItem/qwSelect'; // select组件
import qwDatePicker from '@/components/common/formItem/qwDatePicker'; // 时间组件
import qwUpload from '@/components/common/formItem/qwUpload'; // upload组件
import qwCascader from '@/components/common/formItem/qwCascader'; // 级联组件
import qwRadio from '@/components/common/formItem/qwRadio'; // 单选组件
import qwCheckbox from '@/components/common/formItem/qwCheckbox'; // 多选组件
import qwQuill from '@/components/common/formItem/qwQuill'; // 多选组件

export default {
  mixins: [forms],
  components: {
    qwSelectTree,
    qwInput,
    qwDatePicker,
    qwSelect,
    qwUpload,
    qwCascader,
    qwRadio,
    qwCheckbox,
    qwQuill
  },
  data () {
    return {};
  },
  methods: {
    // 获取初始配置信息
    getConfigData () {
      this.pagePath = this.$route.path;
      let dynamicData = require('./configjs/attributeClassificationAdd')
        .default;
      this.requestApi = dynamicData.requestApi; // 页面所需接口集合
      this.$set(this.$data, 'dynamicData', dynamicData);

      // copy 一份数据 方便清空表单数据
      let copyFormData = JSON.parse(JSON.stringify(this.dynamicData.formData));
      let copyFormDataRules = JSON.parse(
        JSON.stringify(this.dynamicData.formDataRules)
      );
      // 传给子组件的数据
      this.copyFormData = copyFormData;
      this.copyFormDataRules = copyFormDataRules;

      // 动态添加formData 提交数据内容
      copyFormData.forEach(item => {
        const obj = item.data;
        let name = '';
        let val = '';
        if (obj.type === 'inputRange' || obj.type === 'inputNumberRange') {
          obj.valueArr.forEach(item => {
            name = item.name;
            val = item.value;
            this.$set(this.formData, name, val);
          });
        } else {
          name = obj.name;
          val = obj.value;
          this.$set(this.formData, name, val);
        }
      });
    },

    // 提交
    handleSubmit (name) {
      this.$refs[name].validate(valid => {
        if (this.formData.attrValueCategoryName === '') {
          this.$Message.error('请填写分类名称');
          return;
        }
        if (valid) {
          if (this.sLoading) {
            return false;
          }
          this.sLoading = true;
          let data = this.formData;

          // 开始请求会员信息
          ApiRequest(
            this.requestApi.addDataInfo.url,
            this.requestApi.addDataInfo.type,
            data,
            false
          ).then(res => {
            if (res.retStatus === '1') {
              this.$Message.success('成功!');
              this.$router.go(-1);
            }
            this.sLoading = false;
          });
        } else {
          this.$Message.error('请完善信息后再提交!');
        }
      });
    },
    handleReset () {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
</style>